<template>
  <div class="shrink-box m-m">
    <section class="left table-box">
      <a-form layout="inline" size="small" auto-label-width :model="listParams" class="mb-20">
        <a-form-item hide-label>
          <a-input
            v-model="listParams.name"
            @press-enter="changeCurrent(1)"
            class="w-50n"
            placeholder="输入权限名称筛选"
          />
        </a-form-item>
        <a-form-item hide-label>
          <a-select placeholder="选择权限组筛选" v-model="listParams.pg_id" class="w-50n" @change="changeCurrent(1)">
            <a-option v-for="item in allPermissionGroup" :value="item.id" :key="item.id" :label="item.name"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item hide-label>
          <a-space>
            <a-button type="primary" @click="changeCurrent(1)">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="onReset">
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <a-space>
        <a-button class="mb-20" type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增权限</span>
        </a-button>
        <a-button
          class="mb-20"
          v-if="selectedKeys.length > 0"
          type="primary"
          size="small"
          @click="onDeleteBatch(false)"
        >
          <template #icon><icon-delete /></template>
          <span>批量删除</span>
        </a-button>
        <a-button class="mb-20" type="primary" size="small" @click="handleVisible">
          <template #icon><icon-bug /></template>
          <span>权限组</span>
        </a-button>
      </a-space>
      <a-table
        row-key="id"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: 'calc(100% - 180px)', minWidth: 800 }"
        size="small"
        v-model:columns="columns"
        :row-selection="{ type: 'checkbox', showCheckedAll: true }"
        v-model:selectedKeys="selectedKeys"
        :pagination="{
          showTotal: true,
          total: pagination.total,
          current: pagination.current,
          pageSize: pagination.pageSize
        }"
        @page-change="changeCurrent"
      >
        <template #action="{ record }">
          <a-space>
            <a-button type="text" @click="onAddOrEdit(record)" size="small"> 编辑 </a-button>
            <a-button type="text" size="small" @click="onDeleteBatch(record.id)"> 删除 </a-button>
          </a-space>
        </template>
      </a-table>
    </section>
    <PermissionGroupDrawer ref="PermissionGroupDrawerRef"></PermissionGroupDrawer>
    <EditDeptModal ref="EditDeptModalRef" @getTableData="getTableData"></EditDeptModal>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { permission, permissionDelete, allPermissionGroupList } from '@/apis'
import { Message, Modal } from '@arco-design/web-vue'
import EditDeptModal from './EditDeptModal.vue'
import PermissionGroupDrawer from './PermissionGroupDrawer.vue'

defineOptions({ name: 'dept' })

const columns = [
  {
    title: '权限名称',
    dataIndex: 'name',
    with: 300,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '显示名称',
    dataIndex: 'display_name',
    with: 150,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '权限组ID',
    dataIndex: 'pg_id',
    with: 100
  },
  {
    title: '排序',
    dataIndex: 'sequence',
    with: 80,
    render: ({ record }) => {
      return record.sequence || '--'
    }
  },
  {
    title: '描述',
    dataIndex: 'description',
    render: ({ record }) => {
      return record.description || '--'
    },
    with: 150
  },
  {
    title: '操作',
    slotName: 'action',
    with: 200
  }
]

const EditDeptModalRef = ref()
const PermissionGroupDrawerRef = ref()
const allPermissionGroup = ref([])
const loading = ref(false)
const selectedKeys = ref([])
const listParams = ref({
  page: 1,
  pageSize: 10,
  name: '',
  pg_id: undefined
})

const tableData = ref([])

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })

const onAddOrEdit = (item) => {
  EditDeptModalRef.value?.addOrEdit(item)
}

const handleVisible = () => {
  PermissionGroupDrawerRef.value?.changeVisible()
}

const getTableData = async () => {
  loading.value = true
  listParams.value.page = pagination.current
  const res = await permission(listParams.value)
  tableData.value = res.data.data
  setTotal(res.data.total)
  loading.value = false
}
getTableData()

// 获取所有权限组
const getAllPermissionGroupList = async () => {
  const res = await allPermissionGroupList()
  allPermissionGroup.value = res.data.data
}
getAllPermissionGroupList()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.value.page = e
  getTableData()
}

// 删除权限
const onDeleteBatch = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认删除？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      const ids = id ? [id] : selectedKeys.value
      const apiArr = ids.map((item) => {
        return permissionDelete({ id: item })
      })
      Promise.all(apiArr)
        .then(() => {
          selectedKeys.value = []
          Message.success('删除成功')
          getTableData()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

// 重置权限列表
const onReset = () => {
  listParams.value.name = ''
  listParams.value.pg_id = undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.shrink-box {
  flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
  border: 1px solid $color-border;
  box-sizing: border-box;
  .left {
    flex: 1;
    padding: $padding;
    overflow-y: hidden;
    height: 100%;
    background: var(--color-bg-2);
  }
}
</style>
